<template>
  <view class="clear-cache-page">
    <!-- 顶部返回按钮和标题 -->
    <view class="header">
      <tn-button 
        backgroundColor="tn-bg-left" 
        style="color: black; margin-top: 10px; width: 35px; height: 35px; font-size: 25px;" 
        :border="false"
        @click="handleReturn"
      >
        <text class="tn-icon-left"></text>
      </tn-button>
      <view class="page-title">清除缓存</view>
    </view>

    <!-- 清除缓存提示 -->
    <view class="content">
      <text class="prompt">确定要清除缓存吗？</text>
    </view>

    <!-- 操作按钮 -->
    <view class="button-group">
      <tn-button 
        backgroundColor="#ff5722" 
        style="color: white; width: 100px; height: 40px; font-size: 16px;" 
        :border="false"
        @click="handleClearCache"
      >
        确定清除
      </tn-button>
      <tn-button 
        backgroundColor="#f5f5f5" 
        style="color: #333; width: 100px; height: 40px; font-size: 16px; margin-left: 20px;" 
        :border="false"
        @click="handleReturn"
      >
        取消
      </tn-button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 返回上一页
    handleReturn() {
      uni.navigateBack({ delta: 1 });
    },
    // 清除缓存逻辑
    handleClearCache() {
      // 模拟清除缓存操作
      uni.showToast({
        title: "缓存已清除",
        icon: "success",
        duration: 2000
      });
      // 可以在这里添加实际的清除缓存代码
      // 例如：清除本地存储、清除缓存文件等
      setTimeout(() => {
        this.handleReturn(); // 清除后返回上一页
      }, 2000);
    }
  }
};
</script>

<style scoped>
.clear-cache-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  width: 100%;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-left: 10px;
  flex: 1;
  text-align: center;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.prompt {
  font-size: 18px;
  color: #666;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>